input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

:root {
    --primary-color: #388e3c;
    --warning-color: #e65100;
    --warning-color-decent: #c45920;
    --common-color: #424242;
    --border-dark: hsla(0, 0%, 100%, .12);
    --border-light: hsla(0, 0%, 100%, .12);
}

p {
    margin-bottom: 0px !important;
}

.moveable {
    -webkit-app-region: drag;
    user-select: none;
}

.non-moveable {
    -webkit-app-region: no-drag;
}

.absolute-centered {
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
}

.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.01s;
}

.fade-enter,
.fade-leave-to {
    opacity: 0;
    transition: all 0.01s;
}

.transition-list-move,
.transition-list-enter-active,
.transition-list-leave-active {
    transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
    /* transition: all 0.7s !important; */
}

.transition-list-enter,
.transition-list-leave-to {
    opacity: 0 !important;
    transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
    transform: scaleY(0.01) translate(30px, 0);
    /* transition: all 0.7s !important; */
    /* transform: translateY(30px); */
}

.transition-list-leave-active {
    position: absolute;
}

/* .v-list-item v-list-item--link {

} */

/* .transition-list-move {
    transition: transform 0.7s !important;
} */

.v-list-item, .v-list-item:hover:before, .v-list-item:focus:before {
    border-radius: 0.25rem;
}

html ::-webkit-scrollbar {
    display: none;
    z-index: 1000;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    cursor: pointer;
    background: transparent;
    z-index: 1000;
}

::-webkit-resizer,
::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    width: 8px;
    height: 8px;
    cursor: pointer;
    background: rgba(155, 155, 155, 0.5);
    transition: all 1s;
    border-radius: 2px;
    z-index: 1000;
}

::-webkit-scrollbar-thumb:hover {
    width: 8px;
    background: rgba(192, 192, 192, 0.8);
    transition: all 1s;
}

.visible-scroll ::-webkit-scrollbar,
.visible-scroll::-webkit-scrollbar {
    display: unset;
    /* width: 0px; */
    /* height: 0px; */
    /* background: transparent; */
}

.vue-grid-item.vue-grid-placeholder {
    background: rgba(0, 0, 0, 0.3) !important;
}

.dark .vue-grid-item.vue-grid-placeholder {
    background: rgba(255, 255, 255, 0.5) !important;
}

.invisible-scroll ::-webkit-scrollbar,
.invisible-scroll::-webkit-scrollbar {
    display: none;
    /* width: 0px; */
    /* height: 0px; */
    /* background: transparent; */
}

.dark .v-dialog .v-card {
    background-color: #424242 !important;
    border-color: #424242 !important;
}

:not(.dark) .v-dialog .v-card {
    /* background-color: unset;
    border-color: unset; */
}

.v-tooltip__content {
    background-color: #000 !important;
}

.v-list-item {
    justify-content: center;
}

.v-menu {
    /* fix wrong menu width */
    max-width: 0px;
}

.main-body .container h1.flex {
    margin-bottom: 10px;
    padding: 6px 8px !important;
}

.main-body .container {
    padding-left: 30px;
    padding-right: 30px;
}

.main-body .v-form .container {
    padding-left: 30px;
    padding-right: 30px;
}

.sidebar.v-navigation-drawer .v-list {
    background: unset;
}

/* Platform specific css */

.darwin .theme--dark.v-navigation-drawer {
    background-color: rgba(66, 66, 66, 0.4);
}

.darwin .main-body {
    background-color: unset;
    border-color: unset;
}

.win32 .loading-background {
    background-color: unset;
}

.win32 .theme--dark.v-navigation-drawer {
    background-color: rgba(66, 66, 66, 0.8);
    /* background-color: rgba(33, 33, 33, 0.85); */
}

.win32 .main-body {
    /* background-color: rgba(66, 66, 66, 0.68); */
    background-color: rgba(33, 33, 33, 0.78);
    /* background-color: rgba(33, 33, 33, 0.7); */
    /* border-color: rgba(33, 33, 33, 0.7); */
}

.win32 .loading-background {
    background-color: rgba(33, 33, 33, 0.78);
}

.main-body.solid {
    background-color: #212121 !important;
    border-color: #212121 !important;
}

/* Draggable card */

.draggable-card {
    /* transition: all !important; */
    /* transition-duration: 0.2s !important; */
}

.draggable-card.dragged {
    transform: scale(0.8);
}

.v-dialog {
    overflow: hidden;
}

a {
    -webkit-user-drag: none;
}

@media only screen and (min-width: 1264px) {
    .container {
        max-width: unset;
    }
}

@media only screen and (min-width: 960px) {
    .container {
        max-width: unset;
    }
}

.v-btn--floating .v-icon {
    height: unset;
}

.header-bar {
    @apply lg: px-15 lg:pt-5 flex flex-row md:px-9 md:pt-2;
}

.header-bar * {
    align-self: center;
}

.v-text-field input {
    @apply z-10;
}

.theme--dark.v-card .v-card__subtitle,
.theme--dark.v-card .v-card__text {
    color: hsla(0, 0%, 100%, .7);
}

.theme--dark .secondary-text {
    color: hsla(0, 0%, 100%, .7);
}

.menuable__content__active ::-webkit-scrollbar {
    display: unset;
}

.v-menu__content::-webkit-scrollbar {
    display: unset;
}

.markdown-body li,
.markdown-body p {
    padding: 0 !important;
    line-height: 1.5 !important;
    word-wrap: break-word !important;
    word-wrap: anywhere !important;
}

.markdown-body blockquote,
.markdown-body code,
.markdown-body details,
.markdown-body dl,
.markdown-body ol,
.markdown-body p,
.markdown-body pre,
.markdown-body table,
.markdown-body ul {
    margin-top: 0 !important;
    margin-bottom: 16px !important;
}

.markdown-body h1,
.markdown-body h2 {
    padding: 10px 0 5px;
    border-bottom: 1px solid #646c75;
}

.markdown-body details {
    @apply rounded;
    border: 0.15rem solid #434956;
}

.markdown-body details summary {
    @apply bg-gray-700 p-2;
}

.markdown-body details ul {
    @apply mt-2 mx-2;
}

.markdown-body ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
}

.markdown-body h1 {
    @apply text-2xl font-bold;
    margin: 0.67em 0;
}

.markdown-body h2 {
    @apply text-xl font-bold;
    margin: 0.67em 0;
}

.markdown-body h3 {
    @apply text-lg;
}

.markdown-body p {
    /* margin: 10px 0; */
}